<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <div class="top">
      <img class="img" src="@/assets/logo.png" />
      <div class="name">{{ userForm.userName }}</div>
      <div class="text">
        <div class="marginRight">
          <icon-user />
          <span v-if="userForm.realName == null">未实名 </span>
          <span v-if="userForm.realName == 0">已实名 </span>
          <span v-if="userForm.realName == 1">待审核 </span>
          <span v-if="userForm.realName == 2">已失败 </span>
          <span v-if="userForm.realName == -1">已驳回 </span>
        </div>
        <div class="marginRight">￥{{ userForm.balance }}元</div>
        <div><icon-schedule />{{ userForm.createTime }}</div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <div>账号信息</div>
        <div class="detail">账户创建时间：{{ userForm.createTime }}</div>
        <div class="detail">首次登录时间：{{ userForm.firstLoginTime }}</div>
        <div class="detail">最新登录时间：{{ userForm.lastLoginTime }}</div>
        <div class="detail">当前登录地址：{{ userForm.session.address }}</div>
        <div class="detail">当前登录IP：{{ userForm.session.ip }}</div>
      </div>
      <div class="right">
        <div>
          <a-tabs type="rounded">
            <a-tab-pane key="1" title="基本信息">
              <div class="gong">
                <div style="display: flex">
                  <div>
                    <img class="img" src="@/assets/real.png" />
                  </div>
                  <div class="marginLeft10">
                    <div class="text">实名认证</div>
                    <div class="texts">
                      <span v-if="userForm.realName == 0">已实名 </span>
                      <span v-else-if="userForm.realName == 1">待审核 </span>
                      <span v-else-if="userForm.realName == 2">已失败 </span>
                      <span v-else-if="userForm.realName == -1">已驳回 </span>
                      <span v-else>暂未实名 </span>
                    </div>
                  </div>
                </div>
                <div style="display: flex; align-items: center"
                  ><a-button type="text" @click="visible = true"
                    >{{ userForm.realName !== undefined ? '更改' : '立即' }}实名</a-button
                  >
                </div>
              </div>
              <div class="gong">
                <div style="display: flex">
                  <div>
                    <img class="img" src="@/assets/phone.png" />
                  </div>
                  <div class="marginLeft10">
                    <div class="text">绑定手机</div>
                    <div class="texts"
                      ><span v-if="userForm.phone">已绑定 </span>
                      <span v-else>当前未绑定手机号 </span>
                    </div>
                  </div>
                </div>
                <div style="display: flex; align-items: center"
                  ><a-button type="text" @click="change(0)"
                    >{{ userForm.phone ? '更改' : '立即' }}绑定</a-button
                  ></div
                >
              </div>
              <div class="gong">
                <div style="display: flex">
                  <div>
                    <img class="img" src="@/assets/email.png" />
                  </div>
                  <div class="marginLeft10">
                    <div class="text">绑定邮箱</div>
                    <div class="texts">
                      <span v-if="userForm.email">已绑定 </span>
                      <span v-else>当前未绑定邮箱 </span></div
                    >
                  </div>
                </div>
                <div style="display: flex; align-items: center"
                  ><a-button type="text" @click="change(1)"
                    >{{ userForm.email ? '更改' : '立即' }}绑定</a-button
                  ></div
                >
              </div>
              <div class="gong">
                <div style="display: flex">
                  <div>
                    <img class="img" src="@/assets/money.png" />
                  </div>
                  <div class="marginLeft10">
                    <div class="text">余额预警</div>
                    <div class="texts">
                      <span v-if="userForm.warningBalance">已设置 </span>
                      <span v-else> 当前未设置余额预警 </span>
                    </div>
                  </div>
                </div>
                <div style="display: flex; align-items: center"
                  ><a-button type="text" @click="openWarn"
                    >{{ userForm.warningBalance ? '更改' : '立即' }}设置</a-button
                  ></div
                >
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" title="提现信息">
              <div class="gong">
                <div style="display: flex">
                  <div>
                    <img class="img" src="@/assets/we.png" />
                  </div>
                  <div class="marginLeft10">
                    <div class="text">绑定微信</div>
                    <div class="texts"
                      ><span v-if="payForm.wechat">已绑定 </span>
                      <span v-else>当前未绑定微信 </span></div
                    >
                  </div>
                </div>
                <div style="display: flex; align-items: center"
                  ><a-button type="text" @click="openNum(1)"
                    >{{ payForm.wechat ? '更改' : '立即' }}绑定</a-button
                  ></div
                >
              </div>
              <div class="gong">
                <div style="display: flex">
                  <div>
                    <img class="img" src="@/assets/zfb.png" />
                  </div>
                  <div class="marginLeft10">
                    <div class="text">绑定支付宝</div>
                    <div class="texts"
                      ><span v-if="payForm.ali">已绑定 </span>
                      <span v-else>当前未绑定支付宝 </span></div
                    >
                  </div>
                </div>
                <div style="display: flex; align-items: center"
                  ><a-button type="text" @click="openNum(0)"
                    >{{ payForm.ali ? '更改' : '立即' }}绑定</a-button
                  ></div
                >
              </div>
              <div class="gong">
                <div style="display: flex">
                  <div>
                    <img class="img" src="@/assets/yh.png" />
                  </div>
                  <div class="marginLeft10">
                    <div class="text">绑定银行卡</div>
                    <div class="texts"
                      ><span v-if="payForm.bank">已绑定 </span>
                      <span v-else>当前未绑定银行卡 </span></div
                    >
                  </div>
                </div>
                <div style="display: flex; align-items: center"
                  ><a-button type="text" @click="openNum(2)"
                    >{{ payForm.bank ? '更改' : '立即' }}绑定</a-button
                  ></div
                >
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>
    <!-- 实名认证 -->
    <a-modal
      v-model:visible="visible"
      :mask-closable="false"
      @before-close="handleRealCancel"
      title-align="start"
    >
      <template #title> 实名认证 </template>
      <div>
        <div class="type">
          <div
            style="width: 33%"
            v-for="item in configReal.list"
            v-show="configReal.list.length > 1"
            :key="item.type"
            :class="realForm.type == item.type ? 'color' : ''"
            @click="changeType(item.type)"
          >
            <img class="img" :src="item.url" />
            <div :class="realForm.type == item.type ? 'color title' : 'title'">{{ item.name }}</div>
          </div>
        </div>
        <a-form ref="realRef" :auto-label-width="true" :model="realForm" @submit="handleRealOk">
          <a-form-item
            v-if="realForm.type == 0"
            :rules="[{ required: true, message: '真实姓名不能为空' }]"
            :validate-trigger="['change', 'input']"
            label="真实姓名"
            field="name"
            asterisk-position="end"
          >
            <a-input placeholder="请输入真实姓名" v-model.trim="realForm.name" />
          </a-form-item>
          <a-form-item
            v-else
            label="法人姓名"
            :rules="[{ required: true, message: '法人姓名不能为空' }]"
            :validate-trigger="['change', 'input']"
            field="name"
            asterisk-position="end"
          >
            <a-input placeholder="请输入法人姓名" v-model.trim="realForm.name" />
          </a-form-item>
          <a-form-item
            label="身份证号码"
            :rules="[{ required: true, message: '身份证号码不能为空' }]"
            :validate-trigger="['change', 'input']"
            field="identityCard"
            asterisk-position="end"
          >
            <a-input placeholder="请输入身份证号码" v-model.trim="realForm.identityCard" />
          </a-form-item>
          <a-form-item
            label="手机号"
            :rules="[{ required: true, message: '手机号不能为空' }]"
            :validate-trigger="['change', 'input']"
            field="phone"
            asterisk-position="end"
          >
            <a-input placeholder="请输入手机号" v-model.trim="realForm.phone" />
          </a-form-item>
          <a-form-item
            label="验证码"
            :rules="[{ required: true, message: '验证码不能为空' }]"
            :validate-trigger="['change', 'input']"
            field="code"
            asterisk-position="end"
          >
            <a-input placeholder="请输入验证码" v-model.trim="realForm.code" search-button>
              <template #append>
                <a-button
                  type="primary"
                  style="height: 25px; width: 100%"
                  :loading="sendCode.disable"
                  @click="smsFn"
                  >{{ sendCode.codeText }}</a-button
                >
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
            label="身份证正面"
            v-if="configReal.userIdCard"
            field="identityCardImageJust"
          >
            <a-upload
              action="/app/user/file/upload/private"
              @success="onSuccessBcg1"
              :show-file-list="false"
              @error="onError"
              :image-preview="true"
            >
              <template #upload-button>
                <div class="`arco-upload-list-item">
                  <div
                    class="arco-upload-list-picture custom-upload-avatar"
                    v-if="realForm.identityCardImageJust"
                  >
                    <img :src="identityCardImageJust" />
                    <div class="arco-upload-list-picture-mask">
                      <IconEdit />
                    </div>
                  </div>
                  <div class="arco-upload-picture-card" v-else>
                    <div class="arco-upload-picture-card-text">
                      <IconPlus />
                    </div>
                  </div>
                </div>
              </template>
            </a-upload>
          </a-form-item>
          <a-form-item
            label="身份证反面"
            v-if="configReal.userIdCard"
            field="identityCardImageBack"
          >
            <a-upload
              :action="url"
              :show-file-list="false"
              @success="onSuccessBcg2"
              @error="onError"
              :image-preview="true"
            >
              <template #upload-button>
                <div
                  class="arco-upload-list-picture custom-upload-avatar"
                  v-if="realForm.identityCardImageBack"
                >
                  <img :src="identityCardImageBack" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                  </div>
                </div>
              </template>
            </a-upload>
          </a-form-item>
          <a-form-item label="手持身份证" v-if="configReal.userHand" field="icp">
            <a-upload
              :action="url"
              :show-file-list="false"
              @success="onSuccessBcg3"
              @error="onError"
              :image-preview="true"
            >
              <template #upload-button>
                <div
                  class="arco-upload-list-picture custom-upload-avatar"
                  v-if="realForm.identityCardImageHand"
                >
                  <img :src="identityCardImageHand" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                  </div>
                </div>
              </template>
            </a-upload>
          </a-form-item>
          <a-form-item v-if="realForm.type !== 0" label="执照照片" field="icp">
            <a-upload
              :action="url"
              :show-file-list="false"
              @success="onSuccessBcg4"
              @error="onError"
              :image-preview="true"
            >
              <template #upload-button>
                <div
                  class="arco-upload-list-picture custom-upload-avatar"
                  v-if="realForm.businessIcense"
                >
                  <img :src="businessIcense" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                  </div>
                </div>
              </template>
            </a-upload>
          </a-form-item>
          <a-form-item label="其他材料" field="icp">
            <a-upload
              :action="url"
              :show-file-list="false"
              @error="onError"
              @success="onSuccessBcg5"
              :image-preview="true"
            >
              <template #upload-button>
                <div class="arco-upload-list-picture custom-upload-avatar" v-if="realForm.other">
                  <img :src="other" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                  </div>
                </div>
              </template>
            </a-upload>
            <template #extra>
              <div>请查看系统实名提示，根据系统实名提示上传材料</div>
            </template>
          </a-form-item>
          <a-form-item>
            <a-button html-type="submit" type="primary" long>立即实名</a-button>
            <template #extra>
              <div
                style="
                  color: #3491fa;
                  font-size: 12px;
                  text-align: center;
                  width: 382px;
                  line-height: 20px;
                "
                ><icon-sound />{{ configReal.userTips }}</div
              >
            </template>
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-space>
          <!-- <a-button @click="handleRealCancel">取消</a-button>
          <a-button type="primary" @click="">确定</a-button> -->
        </a-space>
      </template>
    </a-modal>

    <!-- 绑定手机/邮箱 -->
    <a-modal
      v-model:visible="phoneVisible"
      :mask-closable="false"
      :title="type == 0 ? '绑定手机' : '绑定邮箱'"
      @before-close="handlePhoneCancel"
      title-align="start"
    >
      <div>
        <a-form ref="phoneRef" :auto-label-width="true" :model="phoneForm">
          <a-form-item v-if="userForm.phone && type == 0" label="旧手机" field="phone">
            {{
              userForm.phone.slice(0, 3) + '****' + userForm.phone.slice(userForm.phone.length - 4)
            }}
          </a-form-item>
          <a-form-item v-if="userForm.email && type == 1" label="旧邮箱" field="phone">
            {{
              userForm.email.slice(0, 3) + '****' + userForm.email.slice(userForm.email.length - 12)
            }}
          </a-form-item>
          <a-form-item
            :label="type == 0 ? '手机号' : '邮箱号'"
            :rules="[{ required: true, message: type == 0 ? '手机号不能为空' : '邮箱号不能为空' }]"
            :validate-trigger="['change', 'input']"
            field="phone"
            asterisk-position="end"
          >
            <a-input
              :placeholder="type == 0 ? '请输入手机号' : '请输入邮箱号'"
              v-model.trim="phoneForm.phone"
            />
          </a-form-item>
          <a-form-item
            label="验证码"
            :rules="[{ required: true, message: '验证码不能为空' }]"
            :validate-trigger="['change', 'input']"
            field="code"
            asterisk-position="end"
          >
            <a-input placeholder="请输入验证码" v-model.trim="phoneForm.code" search-button>
              <template #append>
                <a-button
                  type="primary"
                  style="height: 25px; width: 100%"
                  :loading="sendCode.disable"
                  @click="smsphoneFn"
                  >{{ sendCode.codeText }}</a-button
                >
              </template>
            </a-input>
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="handlePhoneCancel">取消</a-button>
          <a-button type="primary" @click="handlePhoneOk">确定</a-button>
        </a-space>
      </template>
    </a-modal>

    <!-- 解绑手机 -->
    <a-modal
      v-model:visible="phonesVisible"
      :mask-closable="false"
      title="解绑手机"
      @before-close="handlePhonesCancel"
      title-align="start"
    >
      <div>
        <a-form ref="phoneRef" :auto-label-width="true" :model="phoneForm">
          <a-form-item
            label="验证码"
            :rules="[{ required: true, message: '验证码不能为空' }]"
            :validate-trigger="['change', 'input']"
            field="oldCode"
            asterisk-position="end"
          >
            <a-input placeholder="请输入验证码" v-model.trim="phoneForm.oldCode" search-button>
              <template #append>
                <a-button
                  type="primary"
                  style="height: 25px; width: 100%"
                  :loading="sendCode.disable"
                  @click="unbindingFns"
                  >{{ sendCode.codeText }}</a-button
                >
              </template>
            </a-input>
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="handlePhonesCancel">取消</a-button>
          <a-button type="primary" @click="handlePhoneOk">确定</a-button>
        </a-space>
      </template>
    </a-modal>

    <!-- 设置预警 -->
    <a-modal
      v-model:visible="warnVisible"
      :mask-closable="false"
      title="设置预警"
      @before-close="handleWarnCancel"
      title-align="start"
    >
      <div>
        <a-form ref="warnRef" :auto-label-width="true" :model="warnForm">
          <a-form-item
            label="预警金额"
            :rules="[{ required: true, message: '预警金额不能为空' }]"
            :validate-trigger="['change', 'input']"
            field="warningBalance"
            asterisk-position="end"
          >
            <a-input-number placeholder="请输入预警金额" v-model.trim="warnForm.warningBalance" />
            <template #extra>
              <div>预警金额为空时，将不会提醒</div>
            </template>
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="handleWarnCancel">取消</a-button>
          <a-button type="primary" @click="handleWarnOk">确定</a-button>
        </a-space>
      </template>
    </a-modal>

    <!-- 绑定微信/支付宝 -->
    <a-modal
      v-model:visible="numVisible"
      :mask-closable="false"
      :title="numForm.type == 0 ? '绑定支付宝' : numForm.type == 1 ? '绑定微信' : '绑定银行卡'"
      @before-close="handleNumCancel"
      title-align="start"
    >
      <div>
        <a-form ref="numRef" :auto-label-width="true" :model="numForm">
          <a-form-item
            label="提现姓名"
            :rules="[{ required: true, message: '提现姓名不能为空' }]"
            :validate-trigger="['change', 'input']"
            field="name"
            asterisk-position="end"
          >
            <a-input placeholder="请输入提现姓名" v-model.trim="numForm.name" />
            <template #extra>
              <div>提现姓名请与实名姓名一致，否则可能导致不能发起提现或不能提现成功</div>
            </template>
          </a-form-item>
          <a-form-item
            :label="numForm.type == 2 ? '银行卡号' : '提现账号'"
            :rules="[
              {
                required: true,
                message: numForm.type == 2 ? '银行卡号不能为空' : '提现账号不能为空',
              },
            ]"
            :validate-trigger="['change', 'input']"
            field="accountNumber"
            asterisk-position="end"
          >
            <a-input
              :placeholder="
                numForm.type == 2
                  ? '请输入银行卡号'
                  : numForm.type == 1
                  ? '未获取openid'
                  : '请输入提现账号'
              "
              v-model.trim="numForm.accountNumber"
              :disabled="numForm.type == 1 ? true : false"
              :search-button="numForm.type == 1 ? true : false"
            >
              <template v-if="numForm.type == 1" #append>
                <a-button type="primary" style="height: 25px; width: 100%" @click="qrFn"
                  >获取openid</a-button
                >
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
            label="验证码"
            :rules="[
              {
                required: true,
                message: '验证码不能为空',
              },
            ]"
            :validate-trigger="['change', 'input']"
            field="code"
            asterisk-position="end"
          >
            <a-input placeholder="请输入验证码" v-model.trim="numForm.code" search-button>
              <template #append>
                <a-button
                  type="primary"
                  style="height: 25px; width: 100%"
                  :loading="sendCode.disable"
                  @click="smsFns"
                  >{{ sendCode.codeText }}</a-button
                >
              </template>
            </a-input>
          </a-form-item>
          <a-form-item v-if="numForm.type != 2" label="收款码" field="other">
            <a-upload
              action="/app/user/file/upload"
              @success="onSuccessBcg6"
              :show-file-list="false"
              @error="onError"
              :image-preview="true"
            >
              <template #upload-button>
                <div class="`arco-upload-list-item">
                  <div
                    class="arco-upload-list-picture custom-upload-avatar"
                    v-if="numForm.information"
                  >
                    <img :src="numForm.information" />
                    <div class="arco-upload-list-picture-mask">
                      <IconEdit />
                    </div>
                  </div>
                  <div class="arco-upload-picture-card" v-else>
                    <div class="arco-upload-picture-card-text">
                      <IconPlus />
                    </div>
                  </div>
                </div>
              </template>
            </a-upload>
          </a-form-item>
          <a-form-item
            v-if="numForm.type == 2"
            label="开户支行"
            :rules="[{ required: true, message: '提现姓名不能为空' }]"
            :validate-trigger="['change', 'input']"
            field="information"
            asterisk-position="end"
          >
            <a-input placeholder="请输入开户支行" v-model.trim="numForm.information" />
            <template #extra>
              <div
                >开户支行为您的银行卡办卡的具体网点信息，如果实在不清楚，可以百度搜索一
                下，有详细解释。</div
              >
            </template>
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="handleNumCancel">取消</a-button>
          <a-button type="primary" @click="handleNumOk">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 获取openid -->
    <a-modal
      v-model:visible="visibles"
      title="获取openid"
      width="280px"
      :mask-closable="false"
      title-align="start"
      hide-cancel
      hide-ok
    >
      <div>
        <img style="width: 240px; height: 240px" :src="imgUrl" alt="" />
      </div>
      <template #footer>
        <!-- <a-space>
          <a-button type="primary" v-if="path.length > 1" :loading="loadings" @click="paySuccessFn">
            我已登录
          </a-button>
        </a-space> -->
      </template>
    </a-modal>
    <a-modal
      v-model:visible="visibleaa"
      title="立即充值"
      :mask-closable="false"
      title-align="start"
      :onBeforeClose="beforClose"
    >
      <a-form ref="detailRef" :model="detailForm">
        <a-form-item label="支付方式" field="payType">
          <a-radio-group
            @change="getPay(detailForm.payType)"
            class="radio-bcg"
            v-model="detailForm.payType"
          >
            <a-radio v-for="(item, index) in typelist" :key="index" :value="index">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">{{ item.name }}</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="payId" v-if="detailForm.payList.length > 1" label="支付商户">
          <a-select
            placeholder="请选择支付商户"
            allow-search
            v-model="detailForm.payId"
            allow-clear
            @change="getPayFn(detailForm.payId)"
          >
            <a-option v-for="item in detailForm.payList" :key="item.id" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="beforClose">取消</a-button>
          <a-button type="primary" :loading="loading" @click="oks">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="visiblesa"
      :title="path.length > 1 ? '扫码登录' : '扫码支付'"
      width="280px"
      :mask-closable="false"
      title-align="start"
      hide-cancel
      hide-ok
      :before-close="beforClosew"
    >
      <div>
        <img style="width: 240px; height: 240px" :src="seachForm.imgUrl" alt="" />
      </div>
      <template #footer>
        <a-space>
          <a-button type="primary" v-if="path.length > 1" :loading="loadings" @click="paySuccessFn">
            我已登录
          </a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import homeIcon from '@/assets/real.png'
  import homeIcon1 from '@/assets/one.png'
  import homeIcon2 from '@/assets/two.png'
  import { formpost, get, post } from '@/api/http'
  import {
    configurationReal,
    sms,
    configReals,
    userDetail,
    phoneSend,
    phoneSet,
    emailSet,
    emailSend,
    balanceSet,
    withdrawalSet,
    codeSet,
    unbinding,
    withdrawalGet,
    realpay,
  } from '@/api/user'

  import { onMounted, reactive, ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { qr } from '@/api/url'
  import useCommonStore from '@/store/modules/common'
  const useCommon = useCommonStore()
  const phonesVisible = ref(false)

  const phonesRef = ref()

  const visible = ref(false)
  const phoneVisible = ref(false)
  const warnVisible = ref(false)
  const payForm: any = ref({})
  const url = ref('/app/user/file/upload/private')
  const type = ref(0)
  const warnRef = ref()

  const warnForm: any = ref({
    warningBalance: '',
  })
  const imgUrl = ref('')
  const visibles = ref(false)
  const numVisible = ref(false)
  const numRef = ref()
  const numForm: any = ref({
    name: '',
    accountNumber: '',
    type: '',
    information: '',
  })

  const realForm: any = ref({
    name: '', // 姓名
    phone: '', // 手机号
    code: '',
    identityCard: '', // 身份证号
    identityCardImageJust: '', // 身份证正面
    identityCardImageBack: '', // 身份证反面
    identityCardImageHand: '', // 手持身份证
    businessIcense: '', // 营业执照
    other: '', // 其它材料
    type: 0, // 0个人实名 1个体实名 2企业实名
  })
  const phoneRef = ref()
  const phoneForm: any = ref({
    phone: '', // 手机号
    code: '',
    oldCode: '',
  })
  const sendCode = reactive({
    codeText: '发送验证码',
    disable: false,
  })
  const identityCardImageJust = ref('') // 身份证正面
  const identityCardImageBack = ref('') // 身份证反面
  const identityCardImageHand = ref('') // 手持身份证
  const businessIcense = ref('') // 营业执照
  const other = ref('') // 其它材料
  const configReal: any = ref({})
  const times = ref()
  const typeList: any = ref([
    {
      type: 0,
      name: '个人实名',
      url: homeIcon,
    },
    {
      type: 1,
      name: '个体户实名',
      url: homeIcon1,
    },
    {
      type: 2,
      name: '企业实名',
      url: homeIcon2,
    },
  ])
  const userForm: any = ref({ phone: '111111111', session: {} })
  const realRef: any = ref()
  //支付
  const detailForm = reactive({
    name: '',
    price: 0,
    realNum: 0,
    payType: 0,
    payList: [{ id: 1, name: '支付商户' }],
    payId: '',
  })
  const seachForm = reactive({
    imgUrl: '',
    payForm: {},
    list: [],
    type: 0,
  })
  const visibleaa = ref(false)
  const visiblesa = ref(false)
  const path = ref('')
  const uid = ref('')
  const loadings = ref(false)
  const loading = ref(false)
  const detailRef = ref()
  const orderNum = ref('')
  const getPayFn = (val: any) => {
    path.value = ''
    detailForm.payList.forEach((item: any) => {
      if (item.id == val) {
        detailForm.price = item.serviceCharge
        detailForm.payId = val
        if (item.payProduct.type == 2) {
          if (item.payProduct.path) {
            if (uid.value == '') {
              uid.value = guid2()
            }
            path.value = `${window.location.protocol}//${window.location.host}${item.payProduct.path}?payId=${val}&state=${uid.value}&redirectUri=${window.location.protocol}//${window.location.host}/web/template/wechat/login/success`
          }
        }
      }
    })
  }
  const beforClosew = () => {
    userDetailFn()
    visibles.value = false
  }
  const beforClose = () => {
    detailForm.payId = ''
    detailForm.payList = []
    detailForm.payType = 0
    detailForm.price = 0
    detailForm.name = ''
    detailForm.realNum = 0
    path.value = ''
    visibleaa.value = false
  }
  const chong = () => {
    visibleaa.value = true
    getPay(detailForm.payType)
  }
  const typelist: any = ref([])
  const getPay = (val: any) => {
    detailForm.payId = ''
    detailForm.price = 0
    uid.value = ''
    path.value = ''
    useCommon.getPayList(val).then((res: any) => {
      typelist.value = res.data
      detailForm.payList = res.data[val].list[0]
      detailForm.payId = res.data[val].list[0].id
      detailForm.price = res.data[val].list[0].serviceCharge
      if (res.data[val].list[0].payProduct.type == 2) {
        if (res.data[val].list[0].payProduct.path) {
          uid.value = guid2()
          console.log(uid.value)
          path.value = `${window.location.protocol}//${window.location.host}${res.data[val].list[0].payProduct.path}?payId=${detailForm.payId}&state=${uid.value}&redirectUri=${window.location.protocol}//${window.location.host}/web/template/wechat/login/success`
        }
      }
    })
  }
  const paySuccessFn = () => {
    loadings.value = true
    get({
      url: realpay,
      data: {
        payId: detailForm.payId,
        outTradeNo: orderNum.value,
        state: uid.value,
      },
    })
      .then((res) => {
        if (res.code == 0) {
          loadings.value = false
          if (uid.value == '') {
            visibles.value = false
            Message.success(res.msg)
          } else {
            seachForm.payForm = res.data
            loadings.value = false

            if (res.data.qrcode && res.data.openUrl) {
              if (is_weixn() == false) {
                seachForm.imgUrl = `${window.location.protocol}//${
                  window.location.host
                }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
                path.value = ''
                visiblesa.value = true
              } else {
                // let a = document.createElement('a')
                // a.setAttribute('href', res.data.openUrl)
                // a.setAttribute('target', '_blank')
                // document.body.appendChild(a)
                // a.click()
                // a.remove()
                if (isIOS() == true) {
                  window.location.href = res.data.openUrl
                } else {
                  window.open(res.data.openUrl)
                }
              }
            } else {
              if (res.data.qrcode) {
                seachForm.imgUrl = `${window.location.protocol}//${
                  window.location.host
                }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
                path.value = ''
                visiblesa.value = true
              } else {
                // let a = document.createElement('a')
                // a.setAttribute('href', res.data.openUrl)
                // a.setAttribute('target', '_blank')
                // document.body.appendChild(a)
                // a.click()
                // a.remove()
                if (isIOS() == true) {
                  window.location.href = res.data.openUrl
                } else {
                  window.open(res.data.openUrl)
                }
              }
            }
          }
        }
      })
      .catch(() => {
        loadings.value = false
      })
  }
  const oks = () => {
    console.log(path.value)
    detailRef.value.validate((error: any) => {
      if (!error) {
        if (path.value != '') {
          seachForm.imgUrl = `${window.location.protocol}//${
            window.location.host
          }${qr}?content=${encodeURIComponent(path.value)}`
          console.log(seachForm.imgUrl)
          visibles.value = true
        } else {
          loading.value = true
          get({
            url: realpay,
            data: {
              payId: detailForm.payId,
              outTradeNo: orderNum.value,
            },
          })
            .then((res) => {
              seachForm.payForm = res.data
              loading.value = false
              if (res.data.qrcode && res.data.openUrl) {
                if (is_weixn() == false) {
                  seachForm.imgUrl = `${window.location.protocol}//${
                    window.location.host
                  }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
                  path.value = ''
                  visiblesa.value = true
                } else {
                  // let a = document.createElement('a')
                  // a.setAttribute('href', res.data.openUrl)
                  // a.setAttribute('target', '_blank')
                  // document.body.appendChild(a)
                  // a.click()
                  // a.remove()
                  if (isIOS() == true) {
                    window.location.href = res.data.openUrl
                  } else {
                    window.open(res.data.openUrl)
                  }
                }
              } else {
                if (res.data.qrcode) {
                  seachForm.imgUrl = `${window.location.protocol}//${
                    window.location.host
                  }${qr}?content=${encodeURIComponent(res.data.qrcode)}`
                  path.value = ''
                  visiblesa.value = true
                } else {
                  // let a = document.createElement('a')
                  // a.setAttribute('href', res.data.openUrl)
                  // a.setAttribute('target', '_blank')
                  // document.body.appendChild(a)
                  // a.click()
                  // a.remove()
                  if (isIOS() == true) {
                    window.location.href = res.data.openUrl
                  } else {
                    window.open(res.data.openUrl)
                  }
                }
              }
            })
            .catch(() => {
              loading.value = false
            })
        }
      }
    })
  }
  function isIOS() {
    const userAgent = navigator.userAgent.toLowerCase()
    return /iphone|ipad|ipod/.test(userAgent)
  }

  function is_weixn() {
    var ua = navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      seachForm.type = 1
      return true
    } else {
      seachForm.type = 2
      return false
    }
  }

  function guid2() {
    function S4() {
      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
    }
    return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4()
  }

  const change = (val: any) => {
    type.value = val
    phoneVisible.value = true
  }

  const openNum = (val: any) => {
    if (val == 1) {
      numForm.value.accountNumber = guid2()
    }
    numForm.value.type = val
    numVisible.value = true
  }
  const qrFn = () => {
    const url = `${window.location.protocol}//${window.location.host}/web/template/wechat/login?state=${numForm.value.accountNumber}&redirectUri=${window.location.protocol}//${window.location.host}/web/template/wechat/login/success`
    imgUrl.value = `${window.location.protocol}//${
      window.location.host
    }${qr}?content=${encodeURIComponent(url)}`
    visibles.value = true
  }

  const handleNumOk = () => {
    numRef.value?.validate().then((error: any) => {
      if (!error) {
        post({
          url: withdrawalSet + '?code=' + numForm.value.code,
          data: { ...numForm.value },
        }).then((res) => {
          if (res.code == 0) {
            userDetailFn()
            withdrawalGetFn()
            handleNumCancel()
            Message.success(res.msg)
          }
        })
      }
    })
  }
  const handleNumCancel = () => {
    numRef.value?.resetFields()
    numForm.value.information = ''
    numVisible.value = false
    clearInterval(times.value)
    sendCode.codeText = '获取验证码'
    sendCode.disable = false
  }

  const openWarn = () => {
    if (userForm.value.warningBalance) {
      warnForm.value.warningBalance = userForm.value.warningBalance
    }
    warnVisible.value = true
  }
  //解绑
  const unbindingFns = () => {
    clearInterval(times.value)
    get({
      url: unbinding,
      data: {},
    }).then((res) => {
      if (res.code == 0) {
        phonesVisible.value = true
        phoneVisible.value = false
        Message.success(res.msg)
        let time = 60
        times.value = setInterval(() => {
          sendCode.disable = true
          time--
          sendCode.codeText = time + 's重新发送'
          if (time <= 0) {
            clearInterval(times.value)
            sendCode.codeText = '获取验证码'
            sendCode.disable = false
          }
        }, 1000)
      }
    })
  }
  //提现商户
  const smsFns = () => {
    get({
      url: codeSet,
      data: {},
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        let time = 60
        times.value = setInterval(() => {
          sendCode.disable = true
          time--
          sendCode.codeText = time + 's重新发送'
          if (time <= 0) {
            clearInterval(times.value)
            sendCode.codeText = '获取验证码'
            sendCode.disable = false
          }
        }, 1000)
      }
    })
  }
  //实名验证
  const smsFn = () => {
    realRef.value.validateField('phone', (value: any) => {
      if (!value) {
        get({
          url: sms,
          data: { phone: realForm.value.phone },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            let time = 60
            times.value = setInterval(() => {
              sendCode.disable = true
              time--
              sendCode.codeText = time + 's重新发送'
              if (time <= 0) {
                clearInterval(times.value)
                sendCode.codeText = '获取验证码'
                sendCode.disable = false
              }
            }, 1000)
          }
        })
      }
    })
  }

  //绑手机和邮箱
  const smsphoneFn = () => {
    phoneRef.value.validateField('phone', (value: any) => {
      if (!value) {
        if (type.value == 0) {
          get({
            url: phoneSend,
            data: { phone: phoneForm.value.phone },
          }).then((res) => {
            if (res.code == 0) {
              userDetailFn()
              withdrawalGetFn()
              Message.success(res.msg)
            }
          })
        } else {
          get({
            url: emailSend,
            data: { email: phoneForm.value.phone },
          }).then((res) => {
            if (res.code == 0) {
              userDetailFn()
              withdrawalGetFn()
              Message.success(res.msg)
              let time = 60
              times.value = setInterval(() => {
                sendCode.disable = true
                time--
                sendCode.codeText = time + 's重新发送'
                if (time <= 0) {
                  clearInterval(times.value)
                  sendCode.codeText = '获取验证码'
                  sendCode.disable = false
                }
              }, 1000)
            }
          })
        }
      }
    })
  }
  const userDetailFn = () => {
    get({
      url: userDetail,
      data: {},
    }).then((res) => {
      if (res.code == 0) {
        console.log('sssssssssss', res.data)
        userForm.value = res.data
      }
    })
  }
  const withdrawalGetFn = () => {
    get({
      url: withdrawalGet,
      data: {},
    }).then((res) => {
      if (res.code == 0) {
        payForm.value = res.data
      }
    })
  }
  const configRealFn = () => {
    get({
      url: configurationReal,
      data: {},
    }).then((res) => {
      if (res.code == 0) {
        res.data.list = []
        res.data.userSubject.forEach((item: any) => {
          typeList.value.forEach((items: any) => {
            if (items.type == item) {
              res.data.list.push(items)
            }
          })
        })
        realForm.value.type = res.data.list[0].type
        configReal.value = res.data
      }
    })
  }
  const handleWarnOk = () => {
    warnRef.value?.validate().then((error: any) => {
      if (!error) {
        formpost({
          url: balanceSet,
          data: { ...warnForm.value },
        }).then((res) => {
          if (res.code == 0) {
            userDetailFn()
            withdrawalGetFn()
            handleWarnCancel()
            Message.success(res.msg)
          }
        })
      }
    })
  }
  const handleWarnCancel = () => {
    warnRef.value?.resetFields()
    warnVisible.value = false
  }
  const handlePhoneOk = () => {
    phoneRef.value?.validate().then((error: any) => {
      if (!error) {
        if (type.value == 0) {
          console.log(userForm.value.phone, '看看电话')
          if (userForm.value.phone != undefined && phoneForm.value.oldCode === '') {
            console.log('111111')
            phonesVisible.value = true
            handlePhoneCancel()
          } else {
            console.log('111111')
            formpost({
              url: phoneSet,
              data: { ...phoneForm.value },
            }).then((res) => {
              if (res.code == 0) {
                userDetailFn()
                withdrawalGetFn()
                handlePhoneCancel()
                handlePhonesCancel()
                phoneForm.value.oldCode = ''
                phoneForm.value.code = ''
                phoneForm.value.phone = ''
                Message.success(res.msg)
              }
            })
          }
        } else {
          formpost({
            url: emailSet,
            data: { email: phoneForm.value.phone, code: phoneForm.value.code },
          }).then((res) => {
            if (res.code == 0) {
              userDetailFn()
              withdrawalGetFn()
              handlePhoneCancel()
              Message.success(res.msg)
            }
          })
        }
      }
    })
  }
  const handlePhoneCancel = () => {
    if (!userForm.value.phone) {
      phoneRef.value?.resetFields()
    }
    phoneVisible.value = false
    sendCode.disable = false
    sendCode.codeText = '发送验证码'
    clearInterval(times.value)
  }
  const handlePhonesCancel = () => {
    phonesRef.value?.resetFields()
    phonesVisible.value = false
    sendCode.disable = false
    clearInterval(times.value)
  }
  const handleRealOk = () => {
    realRef.value?.validate().then((error: any) => {
      if (!error) {
        post({
          url: configReals + '?code=' + realForm.value.code,
          data: { ...realForm.value },
        }).then((res) => {
          if (res.code == 0) {
            if (res.data) {
              chong()
              orderNum.value = res.data
            } else {
              handleRealCancel()
              userDetailFn()
              withdrawalGetFn()
              Message.success(res.msg)
            }
          }
        })
      }
    })
  }
  const handleRealCancel = () => {
    realRef.value?.resetFields()
    visible.value = false
    clearInterval(times.value)
    sendCode.codeText = '获取验证码'
    sendCode.disable = false
  }
  const changeType = (val: any) => {
    realForm.value.type = val
  }
  const onError = (response: any) => {
    Message.error(response.response.msg)
  }
  const onSuccessBcg6 = (fileItem: any) => {
    numForm.value.information = fileItem.response.data.path
  }
  //背景图上传
  const onSuccessBcg1 = (fileItem: any) => {
    realForm.value.identityCardImageJust = fileItem.response.data.path
    identityCardImageJust.value =
      window.location.protocol +
      '//' +
      window.location.host +
      '/app/user/file/download/private?path=' +
      encodeURIComponent(fileItem.response.data.path)
  }
  const onSuccessBcg2 = (fileItem: any) => {
    realForm.value.identityCardImageBack = fileItem.response.data.path
    identityCardImageBack.value =
      window.location.protocol +
      '//' +
      window.location.host +
      '/app/user/file/download/private?path=' +
      encodeURIComponent(fileItem.response.data.path)
  }
  const onSuccessBcg3 = (fileItem: any) => {
    realForm.value.identityCardImageHand = fileItem.response.data.path
    identityCardImageHand.value =
      window.location.protocol +
      '//' +
      window.location.host +
      '/app/user/file/download/private?path=' +
      encodeURIComponent(fileItem.response.data.path)
  }
  const onSuccessBcg4 = (fileItem: any) => {
    realForm.value.businessIcense = fileItem.response.data.path
    businessIcense.value =
      window.location.protocol +
      '//' +
      window.location.host +
      '/app/user/file/download/private?path=' +
      encodeURIComponent(fileItem.response.data.path)
  }
  const onSuccessBcg5 = (fileItem: any) => {
    realForm.value.other = fileItem.response.data.path
    other.value =
      window.location.protocol +
      '//' +
      window.location.host +
      '/app/user/file/download/private?path=' +
      encodeURIComponent(fileItem.response.data.path)
  }
  onMounted(() => {
    configRealFn()
    userDetailFn()
    withdrawalGetFn()
  })
</script>

<style lang="less" scoped>
  .color {
    cursor: pointer;
    color: #3491fa;
  }
  .type {
    display: flex;
    text-align: center;
    margin-bottom: 20px;
    justify-content: center;
    .img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }

    .title {
      font-size: 16px;
    }
  }

  :deep(.arco-tabs-nav-tab) {
    background-color: var(--color-bg-1);
    border-radius: 10px;
  }

  :deep(.arco-tabs-content::before) {
    height: 0px !important;
  }

  :deep(.arco-tabs-tab) {
    margin-right: 20px;
    padding: 0;
    &:hover {
      border-radius: 18px !important;
    }
  }

  :deep(.arco-tabs-nav::before) {
    position: static !important;
    height: 0px !important;
  }

  :deep(.arco-tabs-content) {
    padding-top: 20px;
  }

  :deep(.arco-tabs-nav-ink) {
    opacity: 0;
  }

  :deep(.arco-tabs-tab-active) {
    color: #1d1929;
    // background-color: #e5e6eb;
    // border-radius: 18px;
  }

  :deep(.arco-tabs-tab-title) {
    padding: 5px 20px;
  }

  .gong {
    display: flex;
    padding: 10px 0;
    justify-content: space-between;
    border-bottom: 1px solid #f2f3f5;
    .img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }

    .text {
      line-height: 25px;
      font-size: 16px;
    }
    .marginLeft10 {
      margin-left: 10px;
    }

    .texts {
      color: #4e5969;
    }
  }

  .top {
    height: 245px;
    border-radius: 10px;
    background: url('@/assets/user-bcg.png');
    box-sizing: border-box;
    padding: 30px;
    text-align: center;
    .img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
    }
    .name {
      font-size: 20px;
      margin-top: 20px;
    }
    .text {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      .marginRight {
        margin-right: 20px;
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .left {
      width: 477px;
      height: 517px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 10px;
      padding: 20px;
      .detail {
        font-size: 14px;
        padding: 20px 0;
        border-bottom: 1px solid #c9cdd4;
      }
    }
    .right {
      width: calc(100% - 477px - 20px);
      height: 517px;
      background-color: #fff;
      border-radius: 10px;
      padding: 20px;
    }
  }
</style>
